<template>
  <div class="box7">
    <!-- 标题 -->
    <div>
      <van-nav-bar title="商品详情页" left-arrow @click-left="$router.back()" />
    </div>
    <!-- 轮播 -->
    <div class="Rotation">
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(items, index) in images" :key="index">
          <img :src="items.external_url" alt="" width="100%" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ index + 1 }}/{{ imgLength }}</div>
        </template>
      </van-swipe>
    </div>
    <!-- 价格 -->
    <div class="price">
      <div class="price1">
        <div class="price-q">
          <div class="price-q1">￥{{ commet.goods_price_min }}</div>
          <div class="price-q2">￥{{ commet.line_price_max }}</div>
        </div>
        <div class="price-p">
          <div>已售{{ commet.goods_sales }}件</div>
        </div>
      </div>
      <div class="word">{{ commet.goods_name }}</div>
    </div>
    <!-- 七天无理由退货 -->
    <div class="Return">
      <div class="Return1">
        <van-icon name="passed" color="red" class="Return1-1" />
        <div>七天无理由退货</div>
      </div>
      <div class="Return2">
        <van-icon name="passed" color="red" class="Return2-1" />
        <div>48小时退货</div>
      </div>
      <div class="Return3"><van-icon name="arrow" /></div>
    </div>
    <!-- 商品评价 -->
    <div class="Evaluation">
      <div class="Evaluation1">
        <p>商品评价({{ total }}条)</p>
        <div class="Evaluation2">
          <div>查看更多</div>
          <van-icon name="arrow" class="Evaluation2-1" />
        </div>
      </div>
      <div class="Evaluation3" v-for="item in Sexcds" :key="item.comment_id">
        <div class="Evaluation3-1">
          <img :src="item.user.avatar_url || defaultImg" alt="" />
          <div class="Evaluation3-1-1">{{ item.user.nick_name }}</div>
          <div class="Evaluation3-1-2">
            <van-rate
              :size="25"
              :value="item.score / 2"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <div class="Evaluation3-2">
          <div>{{ item.content }}</div>
        </div>
        <div class="Evaluation3-3">
          <div>{{ item.create_time }}</div>
        </div>
      </div>
    </div>
    <!-- 商品描述 -->
    <div v-html="commet.content" class="Goods"></div>
    <!-- 加入购物车和立即购买 -->
    <van-goods-action class="firct">
      <van-goods-action-icon
        icon="wap-home-o"
        text="首页"
        color="#ee0a24"
        size="50"
        @click="$router.push('/index1')"
      />
      <div class="icon-cart" @click="$router.push('/gowu')">
        <span v-if="cartTotal > 0" class="num">{{ cartTotal }}</span>
        <van-icon name="shopping-cart-o" class="cart" />
        <div class="icon">购物车</div>
      </div>
      <van-goods-action-button
        type="warning"
        @click="addFn"
        text="加入购物车"
      />
      <van-goods-action-button type="danger" @click="buyFn" text="立即购买" />
    </van-goods-action>
    <!-- 购物车弹层 -->
    <van-action-sheet v-model="show" class="content">
      <div class="content1">
        <div class="content2">
          <img :src="commet.goods_image" alt="" />
          <div class="content2-1">
            <div class="content2-1-1">
              ￥<span class="content2-1-1-1">{{ commet.goods_price_min }}</span>
            </div>
            <div class="content2-1-2">库存：{{ commet.stock_total }}</div>
          </div>
          <van-icon name="close" size="30px" @click="quxiao" />
        </div>
        <div class="content3">
          <div>数量</div>
          <QuanTity v-model="addCount"></QuanTity>
        </div>
        <div class="content4" v-if="commet.stock_total">
          <button v-if="mode === 'cart'" @click="addCart">加入购物车</button>
          <button v-else>立即购买</button>
        </div>
        <button v-else class="content5">该商品已抢完</button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { listRows, getProcvjes } from '@/api/producit'
import defaultImg from '@/assets/default-avatar.png'
import QuanTity from '@/components/QuanTity.vue'
import { addCart } from '@/api/crike'
export default {
  name: 'ComWsxdz',
  components: {
    QuanTity
  },
  data () {
    return {
      item: {},
      imgLength: 0,
      index: 0,
      commet: [],
      images: [],
      Sexcds: [],
      total: 0,
      defaultImg,
      show: false,
      mode: 'cart',
      addCount: 1,
      cartTotal: 0
    }
  },
  computed: {
    goodsId () {
      return this.$route.params.id
    }
  },
  methods: {
    onChange (index) {
      this.index = index
    },
    async getDtids () {
      const {
        data: {
          data: { detail }
        }
      } = await listRows(this.goodsId)
      this.commet = detail
      this.images = detail.goods_images
    },
    async getComments () {
      const {
        data: {
          data: { list, total }
        }
      } = await getProcvjes(this.goodsId)
      this.Sexcds = list
      this.total = total
    },
    addFn () {
      this.mode = 'cart'
      this.show = true
    },
    buyFn () {
      this.mode = 'buyNow'
      this.show = true
    },
    quxiao () {
      this.show = false
    },
    async addCart () {
      if (!this.$store.state.urel.userinfo.token) {
        this.$dialog
          .confirm({
            title: '温馨提示',
            message: '需要先登录才能继续操作',
            cancelButtonText: '再逛逛',
            confirmButtonText: '去登陆'
          })
          .then(() => {
            this.$router.push({
              path: '/log',
              query: {
                backUrl: this.$route.fullPath
              }
            })
          })
        return
      }
      const {
        data: { data }
      } = await addCart(
        this.goodsId,
        this.addCount,
        this.commet.skuList[0].goods_sku_id
      )
      this.cartTotal = data.cartTotal
      this.$toast('加入成功')
      this.show = false
      console.log(this.cartTotal)
    }
  },
  created () {
    this.getDtids()
    this.getComments()
  }
}
</script>

<style lang="less">
.box7 {
  .firct{

    .icon-cart{
      position: relative;
      width: 10%;
      .cart{
        margin:auto;
        width: 100%;
        left: 5px;
      }
      .icon{
        font-size:10px;
        color: #646566;
      }
      .num{
        z-index: 999;
        position: absolute;
        right:0;
        top: -8px;
        min-width: 16px;
        color: #fff;
        text-align: center;
        background-color:#ee0a24 ;
        border-radius: 50%;
        width: 10px;
        height: 15px;
        font-size:12px;
      }
  }

  }
  .content {
    .content1 {
      padding: 10px 10px;
      .content2 {
        display: flex;
        img {
          width: 134px;
          height: 134px;
          margin-right: 10px;
        }
        .content2-1 {
          margin-top: 40px;
          width: 180px;
          .content2-1-1 {
            color: red;
            .content2-1-1-1 {
              font-size: 30px;
            }
          }
          .content2-1-2 {
            margin-top: 10px;
          }
        }
      }
      .content3 {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
      }
      .content4 {
        button {
          color: #fff;
          background-color: #ff9402;
          border: none;
          line-height: 50px;
          width: 95%;
          margin: auto;
          border-radius: 25px;
        }
      }
      .content5 {
        color: #fff;
        background-color: #ff9402;
        border: none;
        line-height: 50px;
        width: 95%;
        margin: auto;
        border-radius: 25px;
      }
    }
  }
  .Goods {
    width: 100%;
    overflow: scroll;
    ::v-deep img {
      display: block;
      width: 100% !important;
    }
  }
  .Evaluation {
    padding: 10px;
    .Evaluation1 {
      display: flex;
      justify-content: space-between;
      .Evaluation2 {
        display: flex;
        color: #999999;
        .Evaluation2-1 {
          margin-top: 4px;
        }
      }
    }
    .Evaluation3 {
      margin-top: 10px;
      .Evaluation3-1 {
        display: flex;
        img {
          width: 37px;
          height: 37px;
          margin-right: 5px;
        }
        .Evaluation3-1-1 {
          font-size: 14px;
          margin-top: 11px;
          margin-right: 5px;
        }
        .Evaluation3-1-2 {
          margin-top: 7px;
        }
      }
      .Evaluation3-2 {
        margin-top: 10px;
      }
      .Evaluation3-3 {
        color: #999999;
        margin-top: 10px;
      }
    }
  }
  .Return {
    display: flex;
    margin-right: 10px;
    padding: 10px;
    height: 50px;
    width: 100%;
    background-color: #fafafa;
    line-height: 30px;
    .Return1 {
      display: flex;
      margin-right: 10px;
      .Return1-1 {
        margin-top: 7px;
        margin-right: 5px;
      }
    }
    .Return2 {
      display: flex;
      .Return2-1 {
        margin-top: 7px;
        margin-right: 5px;
      }
    }
    .Return3 {
      margin-left: 80px;
    }
  }
  //无理由退货
  .Rotation {
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .price {
    padding: 10px;
    .word {
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .price1 {
      display: flex;
      justify-content: space-between;
      .price-q {
        display: flex;
        .price-q1 {
          margin-right: 5px;
          font-size: 25px;
          color: red;
        }
        .price-q2 {
          margin-top: 8px;
          color: #9595a3;
          text-decoration: line-through;
        }
      }
      .price-p {
        color: #9595a3;
        font-size: 15px;
        margin-top: 8px;
      }
    }
  }
}
</style>
